var htmldata = "";
var url_prefix="http://gdata.youtube.com/feeds/api/standardfeeds/US/";
var last = "";

function init()
{
    loadJSON('top_rated', 'this_week', 25, 0);

    $('#most_viewed').click(function() {
        loadJSON('most_viewed', 'this_week', 25, 0);
    });

    $('#most_popular').click(function() {
        loadJSON('most_popular', 'this_week', 25, 0);
    });

    $('#top_rated').click(function() {
        loadJSON('top_rated', 'this_week', 25, 0);
    });

    $('#featured').click(function() {
        loadJSON('recently_featured', '', 25, 0);
    });

    $('#load_more').click(function() {
        alert("load more");
        if(last != '') {
            loadJSON(last, '', 25, 25);
        }
    });
}

function parseJSON(root) {
    var feed = root.feed;
    var entries = feed.entry || [];

    $('#content').empty();
    htmldata = "<ul style='list-style: none; margin: 0; padding: 0;'>";
    for (var i = 0; i < entries.length; ++i) {
        var entry = entries[i];
        var title = entry.title.$t;
        var link = entry.media$group.media$player[0].url;
        var img = entry.media$group.media$thumbnail[0].url;
        var dur = entry.media$group.yt$duration.seconds;
        var author = entry.author[0].name.$t;
        var views = entry.yt$statistics.viewCount;
        var rate = entry.gd$rating.average;
        var desc = entry.content.$t;

        desc = desc.substr(0, 200) + " ...";
        title = title.substr(0, 50) + " ...";
        link = link.replace(/www.youtube.com/i, "67.91.202.221:8080");

        htmldata = htmldata + 
        "<div style='position: relative;'>" +
            "<li style='border-bottom: 1px solid #E0E0E0; width: 100%'>" + 
            "<a href='" + link + "'><img src='" + img + "' style='position: float; height: 60px;'></a>" +
            "<div style='position: absolute; top: 2%; left: 30%; height: 0%; width: 60%;'>" + 
                "<a href='" + link + "' style='display: block; text-decoration: none; font-size: 12px;'>" + title + "</a>" +
                "<span style='font-size: 10px;'>" + rate + "</span>&nbsp;&nbsp;" +
                "<span style='font-size: 10px; color: grey;'>" + views + "&nbsp;views</span><br>" +
                "<span style='font-size: 10px; color: blue;'>" + dur + "&nbsp;secs&nbsp;&nbsp;" + "</span>" +
                "<span style='font-size: 10px; color: grey;'>" + author + "</span>" +
            "</div>" + 
            "</li>" +
        "</div>";
    }

    /*
    htmldata = htmldata + 
        "<div style='position: relative;'>" +
            "<li style='border-bottom: 1px solid #E0E0E0; width: 100%'>" + 
            "<div style='position: absolute; top: 2%; left: 30%; height: 0%; width: 60%;'>" + 
                "<span id='load_more' style='font-size: 10px; color: blue;'>Load More ...</span>" +
            "</div>" + 
            "</li>" +
        "</div>";
    */
    htmldata = htmldata + "</ul>";
    $('#content').html(htmldata);
}

function loadJSON(type, time, num, start) {
    tmp = "";
    time_q = "";

    if(time != '') {
        time_q = "time=" + time;
    }
    
    last = type;

    tmp = url_prefix + type + "?" + time_q + "&alt=json-in-script&callback=?&format=6&max-results=" + num + "&start_index=" + start;
    $.getJSON(tmp, parseJSON);
}

